import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_menu/biz/order/detail/detail_pg.dart';
import 'package:flutter_menu/biz/order/order_controller.dart';
import 'package:flutter_menu/biz/order/widget/bottom_tab_bar.dart';
import 'package:flutter_menu/biz/search/search_pg.dart';
import 'package:flutter_menu/gen/assets.gen.dart';
import 'package:flutter_menu/res/app_design.dart';
import 'package:flutter_menu/widgets/load_container.dart';
import 'package:get/get.dart';

class OrderPage extends GetView<OrderController> {
  const OrderPage({super.key});

  static double thumbnailImageItemWidth = (ScreenUtil().screenWidth - 15.w) / 4;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GetBuilder<OrderController>(
          init: controller,
          id: "OrderPage",
          builder: (controller) {
            return body(context);
          }),
    );
  }

  Widget body(BuildContext context) {
    return SafeArea(
      child: Stack(
        children: [
          Container(
            color: AppColors.bgContainer,
            child: Stack(
              children: [
                buildThumbnailPage(context).marginOnly(bottom: mainTabHeight),
                buildDetailImage(context),
                _searchPage().marginOnly(bottom: mainTabHeight)
              ],
            ),
          ),
          Align(alignment: Alignment.bottomCenter, child: BottomTab())
        ],
      ),
    );
  }

  Widget _searchPage() {
    return Obx(() {
      return SearchPg().visible(controller.isInSearchPage());
    });
  }

  Widget buildThumbnailPage(BuildContext context) {
    return LoadContainer(
        controller: controller.loadThumbnailController!,
        emptyWidget: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            MyAssets.images.icEmpty.image().size(width: 73.w, height: 69.w),
            SizedBox(
              height: 47.h,
            ),
            Text(
              "orderThumbnailNoData".tr,
              style: TextStyle(color: AppColors.text_888888, fontSize: 28.sp),
            )
          ],
        ),
        child: Obx(() {
          return GridView.builder(
            padding: const EdgeInsets.all(0),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4, // 每行 4 列
              crossAxisSpacing: 5.w, // 列间距
              mainAxisSpacing: 4.0.w, // 行间距
              childAspectRatio: 0.63, // 宽高比
            ),
            itemCount: controller.productList.length,
            itemBuilder: (context, index) {
              return buildThumbnailImage(context, index);
            },
          );
        }));
  }

  // 大图订单页面
  Widget buildDetailImage(BuildContext context) {
    return Obx(() {
      return Visibility(
        visible: controller.isShowDetail,
        child: const DetailPg(),
      );
    });
  }

  Widget buildThumbnailImage(BuildContext context, int index) {
    final product = controller.productList[index];
    return GestureDetector(
      onTap: () {
        // 点击选中的小图后，进入大图点餐页
        var productUuid = product.productUuid;
        if (productUuid != null && productUuid.isNotEmpty) {
          controller.showOrderDetail(product);
        }
      },
      child: cachedNetworkImage(imageUrl: product.imageUrl),
    );
  }
}

// TODO need to delete in release mode
const String testImageUrl =
    "https://q5.itc.cn/q_70/images03/20240401/b8bf12f130954ebd8e3279059f043a97.jpeg";

Widget cachedNetworkImage({String? imageUrl, BoxFit? fit}) {
  return CachedNetworkImage(
    imageUrl: imageUrl ?? testImageUrl,
    imageBuilder: (context, imageProvider) => Container(
      decoration: BoxDecoration(
        image: DecorationImage(
          image: imageProvider,
          fit: fit ?? BoxFit.fill,
        ),
      ),
    ),
    placeholder: (context, url) =>
        const Align(child: CircularProgressIndicator()),
    errorWidget: (context, url, error) =>
        Container(color: AppColors.text_646464, child: const Icon(Icons.error)),
  );
}
